$(function () {
    // 1. 数据渲染
    var currentPage = 1; //记录当前页
    var pageSize = 5; // 每一页的数据条数

    // 1. 首页数据渲染
    // ajax + 模板
    function render () {
        $.ajax({
             type: 'get',
             url: '/category/querySecondCategoryPaging',
             data: {
                 page: currentPage,
                 pageSize: pageSize
             },
             dataType: 'json',
             success: function (res) {
                 console.log(res);
                 // 页面渲染
                $('tbody').html(template('tmp', res))
                // 通过res.total生成分页
                setPage(res.total)
             }
         })
    }
    render(); // 调用


    //2.  分页
    function setPage (total) {
        // 用插件生成分页小按钮
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total / pageSize),//总页数
            onPageClicked:function(event, originalEvent, type,page){
              //为按钮绑定点击事件 page:当前点击的按钮值
    
              // 1. 改变当前页的取值
              currentPage = page;
    
              // 2. 重新渲染
              render()
            }
      
      });
    }

    // 3. 一级下拉列表填充
    // ajax + 模板引擎
    $.ajax({
         type: 'get',
         url: '/category/queryTopCategoryPaging',
         data: {
             page: 1,
             pageSize: 100
         },
         dataType: 'json',
         success: function (res) {
             console.log(res);
            // cate-one-list 是给ul添加的类, 数据渲染到ul中
             $('.cate-one-list').html(template('tmp-one-list', res))
         }
     })

     // 4. 下拉列表选中效果
     // 当点击 下拉列表时: 
     // 1. 获取当前a标签的文字,设置给按钮的文本
     // 2. 获取当前a标签的id,设置给隐藏域,将来传递给后台

     $('.cate-one-list').on('click', 'a', function () {
         $('.btn-txt').text($(this).text());
         $('#categoryId').val($(this).data('id'))

         // 1. 在下拉列表选中后,恢复下拉类别校验状态
         // 参数1: 校验把那个元素
         // 参数2: 校验成功
         // 参数3: 提示信息, 这个不需要提示信息,就没写
         $('#addform').data('bootstrapValidator').updateStatus('categoryId', 'VALID')
        
     })



     // 5. 图片上传
     $("#file").fileupload({ // 文件服务器返回图片信息后,如何进行处理
        dataType:"json", // 服务器返回数据如何进行解析
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        // 这里就相当于是 success: function() {} 表示成功
        done: function (e, data) {
            console.log(data.result.picAddr);
            var url = data.result.picAddr;
            // 图片预览 
            // $('#img')[0].src = url;
            $('#img').attr('src', url);
            // 把图片地址存放到隐藏域中，将来传递给数据库 
            $('#brandLogo').val(url);
            // 在图片上传完成后，恢复图片的校验状态 
            $('#addform').data('bootstrapValidator').updateStatus('brandLogo', 'VALID')
          }
  });


    // 6. 表单校验
    // 使用表单校验插件
    //使用表单校验插件
    $('#addform').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    //  , ':hidden', ':not(:visible)' :可以不设置
    excluded: [':disabled'],
  
    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
      
    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      // 校验下拉框
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请选择一级分类'
          }
        }
      },
      // 校验输入框
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请选择二级分类'
          }
        }
      },
    //  校验上传图片
    brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请上传图片'
          }
        }
      },
    }
  });


  // 7. 手动恢复, 下拉列表,和图片的校验状态
  // 1. 在下拉列表选中后,恢复下拉类别校验状态
  // 2. 在图片上传完成后,恢复图片的校验状态


  // 8. 添加二级分类
  // 1. 点击添加按钮,获取表单数据,判断数据是否合理,如果数据合理发送数据给后台,进行添加
  // 2. 添加完成后,页面重新渲染,隐藏模态框,表单重置
  $("#addform").on('success.form.bv', function (e) {
      // 清除默认行为
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
         type: 'post',
         url: '/category/addSecondCategory',
         data: $('#addform').serialize(), // 找到form中所有的name属性
         dataType: 'json',
         success: function (res) {
             console.log(res);
             // 页面重新渲染
             render();
             // 隐藏模态框
             $('.modal-add').modal('hide');
             // 表单重置
             $("#addform").data('bootstrapValidator').resetForm(true);
             // 手动恢复 图片 和 按钮的文字
             $('.btn-txt').text('请选择一级分类');
             $('#img').attr('src', './images/none.png');
         }
     })
});

})